forum

home / developersection / forums / how to right-align flex item?

Ask Question
Sandra Emily

Student

Content writing is the process of writing, editing, and publishing content in a digital format. That content can include blog posts, video or podcast scripts, ebooks or whitepapers, press releases, product category descriptions, landing page or social media copy and more.

Follow
Can you answer this question?
Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

06-Jun-2024

Right-align flex item

You can use the justify-content property with the value flex-end to align flex items to the right within a flex container on the flex container.

Example- 

.container {
 display: flex;
 justify-content: flex-end;
}

This CSS code will align flex items to the right within a flex container. You can apply the .container class to the parent element that contains the flex items you want to align to the right.

Example- 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Right-align Flex Items</title>
  <style>
    /* css for align right the item */
    .container {
      display: flex;
      justify-content: flex-end;
      border: 1px solid #ccc;
      padding: 10px;
    }

    /* styling the flex item */
    .item {
      background-color: lightblue;
      padding: 10px;
      margin: 5px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>

</body>
</html>

Output- 

How to Right-align flex item?

 

Also, Read: How to align content of a div to the bottom?

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy